import React from 'react';
import ReactDOM from 'react-dom';

import {contents} from './styles'
import Header from './Header';
import Menu from './Menu'
import Content from './Content'
import Login from './Login'
import {HashRouter as Router, Redirect, Route} from 'react-router-dom'
import State from './State'

import {createStore, applyMiddleware} from "redux";
import {Provider} from 'react-redux';
import thunkMiddleware from "redux-thunk";
import createLogger from 'redux-logger';

import reducers from "./redux/reducer";

const logger = createLogger();
const store = createStore(reducers, applyMiddleware(thunkMiddleware, logger));

const ProtectedComponent = ()=> {
    if (State.isLogined == 1) {
        return (
            <div>
                <Header />
                <div style={contents}>
                    <Menu />
                    <Content />
                </div>
            </div>);
    }
    return <Redirect to="/login"/>
}

const RouterApp = ()=> {
    return (
        <Router>
            <div>
                <ProtectedComponent />
                <Route path="/login" exact component={Login}/>
            </div>
        </Router>
    );
}

const ReduxApp = ()=> {
    return <Provider store={store}>
        <Router>
            <div>
                <ProtectedComponent />
                <Route path="/login" exact component={Login}/>
            </div>
        </Router>
    </Provider>
}

ReactDOM.render(<ReduxApp />, document.getElementById('root'));